<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
    <!-- <meta name="viewport" content="width=device-width, minimum-scale=1.0"> -->
</head>

<style>
    body {
        /*opacity: 0.1;*/
    }
    canvas {
        border: 1px solid grey;
        background-color: #ccc;
    }
</style>

<body>
    <canvas id="app" width="600" height="600"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            webgl2: {
                // fudgeFactor: 1,
                // depheight: 1000,
                // camera: {
                //     // rx: 300,
                //     // ry: 300,
                //     // rz: 1,
                //     // rx: Easycanvas.Transition.pendulum(-180, 180, 1000).loop(),
                //     ry: Easycanvas.Transition.pendulum(-1800, 1800, 1000).loop(),
                //     // ry: Easycanvas.Transition.pendulum(100, 150, 1000).loop(),
                //     // rz: Easycanvas.Transition.pendulum(400, 500, 1000).loop(),
                // }
            },
        });
        $app.start();

        var G = $app.imgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png');

        var Sprite = $app.add({
            style: {
                left: 250, top: 290,
                width: 160, height: 20,
                locate: 'center',
                textAlign: 'right',
                fontSize: '44px',
                fontFamily: 'monospace',
                color: 'rgba(255, 165, 0, 1)',
                zIndex: 10,
            },
            content: {
                img: G
            },
            webgl: window.Easycanvas.webglShapes.block({
                a: 30, b: 50, c: 40,
                img: G,
                rx: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 5000).loop(),
                ry: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 3000).loop(),
                rz: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 2000).loop(),
                // colors: [
                //     Math.random() * 255,
                //     Math.random() * 255,
                //     Math.random() * 255,
                //     Math.random() * 255,
                //     Math.random() * 255,
                // ],
            }),
            children: [{
                content: {
                    text: 'llOOO啊.zxcv',
                },
                style: {
                    left: -100, top: 100,
                },
            }]
        });

        Sprite = $app.add({
            style: {
                left: 250, top: 200,
                width: 160, height: 20,
                locate: 'center',
                textAlign: 'right',
                fontSize: 44,
                color: 'rgba(255, 165, 0, 1)',
            },
            content: {
                text: 'aiwo9啊.test',
                img: G
            },
        });

        Sprite = $app.add({
            style: {
                left: Easycanvas.Transition.pendulum(-200, 200, 13000).loop(),
                top: Easycanvas.Transition.pendulum(-200, 200, 16000).loop(),
                width: 160, height: 20,
                locate: 'center',
                textAlign: 'right',
                fontSize: 44,
                color: 'rgba(255, 165, 0, 1)',
            },
            content: {
                text: Easycanvas.multlineText(`
                    a
                    bbbbbbbbbbbbbbb
                    cc
                `, {

                }),
                img: G,
            }
        });

        var arrayRepeat = function (arr, n) {
            let str = arr.join(',');
            let tmp = '';
            for (var i = 1; i <= n; i++) {
                tmp += str;
                if (i < n) {
                    tmp += ',';
                }
            }
            return tmp.split(',');
        };

        for (var i = 0; i <= 10; i++) {
            // var ball = window.Easycanvas.webglShapes.ball({
            //     r: 50,
            //     // img: G,
            //     tz: Easycanvas.Transition.pendulum(-3000, 3000, 4000).loop(),
            //     rx: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 5000).loop(),
            //     ry: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 3000).loop(),
            //     rz: Easycanvas.Transition.pendulum(0, 360, Math.random() * 2000 + 2000).loop(),
            //     colors: [
            //         Math.random() * 255,
            //         Math.random() * 255,
            //         Math.random() * 255,
            //         Math.random() * 255,
            //         Math.random() * 255,
            //     ],
            // });
            // // var r = 2000;
            // // ball.vertices = new Float32Array(arrayRepeat(ball.vertices, r));
            // // ball.indices = new Uint16Array(arrayRepeat(ball.indices, r));
            // // ball.textures = new Float32Array(arrayRepeat(ball.textures, r));
            // // ball.colors = new Uint8Array(arrayRepeat(ball.colors, r));

            // Sprite.add({
            //     style: {
            //         // left: Math.random() * 500, top: 500,
            //         left: Math.random() * 6000 - 3000,
            //         top: Math.random() * 6000 - 3000,
            //         // left: 300, top: 300,
            //         zIndex: 9,
            //     },
            //     content: {
            //         // img: G
            //     },
            //     webgl: ball,
            // });
            var stone = $app.imgLoader('https://c-zhuo.github.io/tanyitan/stone.jpg');

            $app.add({
                style: {
                    left: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 5000).loop(),
                    top: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 5000).loop(),
                    left: Math.random() * 600,
                    top: Math.random() * 600,
                    zIndex: 10,
                },
                content: {
                    // img: G
                },
                webgl: window.Easycanvas.webglShapes.icosahedron({
                    r: 100,
                    img: stone,
                    rx: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 52000).loop(),
                    ry: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 32000).loop(),
                    rz: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 22000).loop(),
                    colors2: [
                        Math.random() * 255,
                        Math.random() * 255,
                        Math.random() * 255,
                        Math.random() * 255,
                        // Math.random() * 255,
                        // Math.random() * 255,
                    ],
                }),
            });
        }

        // var container = $app;
        // var lastChild = null;
        // for (var i = 0; i <= 2000; i++) {
        //     if (i % 500 === 400) container = lastChild;
        //     lastChild = container.add({
        //         style: {
        //             left: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 5000).loop(),
        //             top: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 5000).loop(),
        //             left: Math.random() * 600 - 4000,
        //             top: Math.random() * 600,
        //             zIndex: 10,
        //         },
        //         events: {
        //             ticked: function () {
        //                 this.getStyle('tx');
        //             },
        //         },
        //         content: {
        //             img: G
        //         },
        //         // webgl: window.Easycanvas.webglShapes.block({
        //         //     a: 30, b: 50, c: 40,
        //         //     // img: G,
        //         //     rx: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 5000).loop(),
        //         //     ry: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 3000).loop(),
        //         //     rz: Easycanvas.Transition.pendulum(0, 360, Math.random() * 5000 + 2000).loop(),
        //         //     colors: [
        //         //         Math.random() * 255,
        //         //         Math.random() * 255,
        //         //         Math.random() * 255,
        //         //         Math.random() * 255,
        //         //         Math.random() * 255,
        //         //     ],
        //         // }),
        //     });
        // }
    </script>
</body>

